<script setup lang="ts">
import {onMounted} from 'vue'
import * as Cesium from 'cesium'

const accessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3NjkzN2EzNi1lNTRiLTQ0ZTAtYmY3Yi1kNjU1MjRiNmJhNzQiLCJpZCI6Mjk4NTI4LCJpYXQiOjE3NDU5OTk2MzV9.nvPrpWsI4a55AyhVDa3oY7407Ws98TNe22DlCejpwbw';
Cesium.Ion.defaultAccessToken = accessToken;

const initPosition = new Cesium.Cartesian3.fromDegrees(105.088336, 30.294511, 1000); // 初始视角经纬度高度
const initOrientation = new Cesium.HeadingPitchRoll.fromDegrees(0, -90, 0); // 初始视角偏航、俯仰、翻滚角度
const homeCameraView = {
  destination: initPosition,
  orientation: {
    heading: initOrientation.heading,
    pitch: initOrientation.pitch,
    roll: initOrientation.roll
  }
}

homeCameraView.duration = 2.0; // 视角切换动画持续时间为0，即瞬间切换
homeCameraView.maximumHeight = 2000; // 视角高度限制
homeCameraView.pitchAdjustHeight = 2000; // 俯仰高度限制
// homeCameraView.flyOverLongitude = 105.088336; // 飞过经度
// homeCameraView.flyOverLongitude = 30.294511; // 飞过纬度
homeCameraView.endTransform = Cesium.Matrix4.IDENTITY; // 视角切换动画结束时的转换矩阵


const options: { [x: string]: Boolean } = {
  geocoder: true, // 地理编码控件不显示 - 右上角 搜索图标（放大镜）
  homeButton: true, // 默认相机位置控件不显示 - 右上角 home 图标
  sceneModePicker: false, // 场景模式控件不显示 - 右上角 网格地球图标
  baseLayerPicker: false, // 基础图层控件不显示 - 右上角 图层图标
  navigationHelpButton: false, // 导航帮助控件不显示 - 右上角 帮助图标（问号）
  animation: true, // 动画控件不显示 - 左下角 仪表盘
  timeline: true, // 时间线控件不显示 - 左下角 时间轴
  fullscreenButton: false, // 全屏控件不显示 - 右下角 全屏图标
  vrButton: false, // vr控件不显示 - 右下角 VR 图标
  infoBox: false, // 信息框控件不显示，点击要素后不弹出信息栏
  selectionIndicator: false, // 选择跟踪控件不显示，点击要素后不弹出锁定框
  scene3DOnly: false // 3D视图模式，不显示2D视图
}
const initMap = () => {
  const viewer = new Cesium.Viewer('cesium-viewer', options)
  console.log('--- viewer created ---', viewer)

  viewer.homeButton.viewModel.command.beforeExecute.addEventListener((e) => {
    e.cancel = true; // 阻止默认的home按钮事件，使用自定义的home按钮事件
    viewer.scene.camera.flyTo(homeCameraView);
  })

  // viewer.imageryLayers.remove(viewer.imageryLayers.get(0));
  // Add Sentinel-2 imagery
  // viewer.imageryLayers.addImageryProvider(new Cesium.IonImageryProvider({assetId: 3954}))


  viewer.scene.globe.enableLighting = true; // 开启光照
  viewer.scene.camera.setView(homeCameraView);
}


// const initMap = () => {
//   try {
//     const viewer = new Cesium.Viewer('cesium-viewer', options);
//     console.log('--- viewer created ---', viewer);
//
//     // 移除默认的基础图层
//     const defaultLayer = viewer.imageryLayers.get(0);
//     if (defaultLayer) {
//       viewer.imageryLayers.remove(defaultLayer);
//     }
//
//     // 添加Sentinel-2影像图层
//     viewer.imageryLayers.addImageryProvider(new Cesium.IonImageryProvider({ assetId: 3954 }));
//   } catch (error) {
//     console.error('初始化地图时出错:', error);
//   }
// }






onMounted(() => {
  initMap()
})
</script>

<template>
  <div class="home">
    <div id="cesium-viewer"></div>
  </div>
</template>

<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#cesium-viewer {
  width: 100%;
  height: 100%;

  :deep(.cesium-viewer-bottom) {
    // 隐藏底部工具栏描述信息
    display: none;
  }
}
</style>